<template>
  <div style="padding:20px">
    <div v-if="!isadd">
    <!-- 积分商品... -->
     <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="商品名称">
          <el-input v-model="productName" placeholder="商品名称"></el-input>   
      </el-form-item>
      <el-form-item label="商品编号">
        <el-input v-model="spuCode" placeholder="商品编号"></el-input>
      </el-form-item>
      <el-form-item label="兑换类型">
          <el-select v-model="convertType"> 
            <el-option value="">全部</el-option>
            <el-option value="全部积分">全部积分</el-option>
            <el-option  value="积分现金">积分现金</el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="状态">
          <el-select v-model="shelves">
            <el-option value="">全部</el-option>
            <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="clear()" size="mini" >重置</el-button>
        <el-button type="primary" @click="queryList" size="mini" >查询</el-button>
        <el-button type="primary" size="mini"  style="margin-bottom: 10px;" @click="addIntegral">新增商品</el-button>
      </el-form-item>
    </el-form>
    <el-row>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号"  width="50">
          </el-table-column>
          <el-table-column prop="modeName" label="板块名称">
          </el-table-column>
          <el-table-column prop="productName" label="商品名称">
          </el-table-column>
          <el-table-column prop="sellNum" label="商品编号">
          </el-table-column>
          <el-table-column prop="convertType" label="兑换类型">
          </el-table-column>
          <el-table-column  label="兑换价格">
            <template slot-scope="scope">
              {{scope.row.convertNum?scope.row.convertNum+'分':''}} &nbsp;&nbsp;&nbsp;&nbsp;
              {{scope.row.convertPrice?scope.row.convertPrice+'元':''}}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="sort" label="排序">
          </el-table-column> -->
          <el-table-column prop="sort" label="销量">
          </el-table-column>
          <el-table-column prop="sort" label="库存">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
          </el-table-column>
          <el-table-column prop="shelves" label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.shelves==1">
            <el-tag  type="success">上架</el-tag>
            </div>
            <div v-else>
              <el-tag type="danger">下架</el-tag>
            </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.shelves==1" size="mini" type="danger" @click="handleDelete(scope.row)">下架</el-button>
              <el-button v-if="scope.row.shelves!=1" size="mini" type="primary" @click="handleDelete(scope.row)">上架</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </el-row>
  </div>
   <div  v-if="isadd">
      <AddIntegral  :type = "type" :params = "params"  @ListenerChild ="ListenerChild"/>
    </div>
</div>
</template>

<script>
import { spuAjax } from 'Ajax'
import AddIntegral from './form'
export default {
  name: 'ProductIntegral',
  components:{
        AddIntegral,
    },
  data() {
      return {
        tableData: [],
        handleList: [],
        convertType:'',
        productName:'',
        params:'',
        isadd:false,
        type:'add',
        spuCode:'',
        shelves:'',
        // 当前页
        currentPage: 1,
        // 每页多少条
        pageSize: 10,
        total:0,
        stateList:[{
          value: 'true',
          label: '上架'
        }, {
          value: 'false',
          label: '下架'
        }]
      }
    },
    created(){
        this.queryList()

    },
    methods:{
      ListenerChild(value){
        this.isadd = false
        if(value=='commit'){
          this.queryList()
        }
      },
      queryList(){
        var params = {
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          convertType:this.convertType,
          productName:this.productName,
          spuCode:this.spuCode,
          shelves:this.shelves,
        }
        spuAjax.getProductScoreList(params).then(res => {
          this.tableData = res.list
          this.currentPage = res.currPage,
          this.pageSize= res.pageSize
          this.total = res.totalCount
        })
      },
      // 编辑
      handleEdit(row){
        this.isadd = true
        this.type = 'edit'
        this.params = JSON.stringify(row)
        // this.$router.push({path:'/product/integralForm', query: {integralDetail: JSON.stringify(row)}});
      },
      addIntegral(){
        this.type = 'add'
        this.isadd = true
        // this.$router.push({path:'/product/integralForm'});
      },
      // 每页多少条
      handleSizeChange(val) {
        this.pageSize = val;
      },
      // 当前页
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      clear(){
        this.convertType = '';
        this.productName = '';
        this.spuCode = '';
        this.shelves = '';
      },
      // 下架
      handleDelete(row){
        this.$confirm('确定操作吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
              let params = {
                id:row.id,
                shelvesMark:row.shelves==1?false:true
              }
              spuAjax.operationScore(params).then(res => {
                if(res.ok){
                  this.$message({ type: 'success', message: '操作成功' })
                  this.queryList()
                } else{
                  this.$message({ type: 'error', message: '操作失败' })
                }
              })
            })
      }
    }
}
</script>

<style scoped>

</style>
